﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Google Map API Demo</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
        <script type="text/javascript" src="js/mootools-core-1.3.2-full-compat.js"></script>
        <script type="text/javascript" src="js/mootools.map.js"></script>
        <script type="text/javascript">
        
        	window.addEvent("domready", function(){
        		// map1
        		var map1 = new INFINITY.GMap($("map1"), {width:700, height:300});
        		var address = "64 Tam Kon Shan Road, Tsing Yi, N.T. Hong Kong";
        		map1.toAddress(address, "demo");
        		
        		// map2
        		var map2 = new INFINITY.GMap($("map2"), {
	        			width:700, 
	        			height:300, 
	        			lat:25.036772,
	        			lng:121.520269
        			}
        		);
        		var latlng = new google.maps.LatLng(25.036772, 121.520269);
        		map2.fitCircle(latlng, 5);
        		
        	    // map3
        		var markers = new Array();
        		function M3AddMarker(gmap, position) {
        		    if (markers.length >= 2) {
        		        markers.length = 0;
        		        gmap.deleteAllMarker();
        		    }
        		    markers.push(position);
        		    gmap.addMarker({
        		        position: position
        		    });

        		    if (markers.length == 2) {
        		        var distance = google.maps.geometry.spherical.computeDistanceBetween(markers[0], markers[1]);
        		        document.getElementById("map3_text").value = distance;
        		        gmap.directions(markers);
        		    }
        		}
        		var map3 = new INFINITY.GMap($("map3"), {width:700, height:300});
        		map3.addEventListener("click", function(event) {
        		    M3AddMarker(map3, event.latLng);
        		});

        	    // map4
        		var m4Markers = new Array();
        		function M4AddMarker(gmap, position) {
        		    m4Markers.push(position);

        		    gmap.directions(m4Markers);
        		}
        		var map4 = new INFINITY.GMap($("map4"), { width: 700, height: 300 });
        		map4.addEventListener("click", function (event) {
        		    M4AddMarker(map4, event.latLng);
        		});

        	    // map5
        		var map5 = new INFINITY.GMap($("map5"), { width: 700, height: 300 });
        		map5.loadKml("http://www.searcharoo.net/SearchKml/newyork.kml");
        		setTimeout(function () {
        		    var latlng = new google.maps.LatLng(25.036772, 121.520269);
        		    map5.addMarker({ position: latlng });
        		    map5.getMap().setZoom(8);
        		}, 1000);

        	    // map6
        		function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        		    infoWindow.setPosition(pos);
        		    infoWindow.setContent(browserHasGeolocation ?
                                          'Error: The Geolocation service failed.' :
                                          'Error: Your browser doesn\'t support geolocation.');
        		}

        		var map6 = new google.maps.Map(document.getElementById('map6'), {
        		    center: { lat: -34.397, lng: 150.644 },
        		    zoom: 6
        		});
        		var infoWindow = new google.maps.InfoWindow({ map: map6 });

        	    // Try HTML5 geolocation.
        		if (navigator.geolocation) {
        		    navigator.geolocation.getCurrentPosition(function (position) {
        		        var pos = {
        		            lat: position.coords.latitude,
        		            lng: position.coords.longitude
        		        };

        		        infoWindow.setPosition(pos);
        		        infoWindow.setContent('Location found.');
        		        map6.setCenter(pos);
        		    }, function () {
        		        handleLocationError(true, infoWindow, map6.getCenter());
        		    });
        		} else {
        		    // Browser doesn't support Geolocation
        		    handleLocationError(false, infoWindow, map6.getCenter());
        		}
        	});
        </script>
    </head>
    <body>
        <h1>Google Map API Demo</h1>
        地址定位功能：
        <div id="map1"></div>
        设置地图中心与圆半径，自动缩放到圆大小:
        <div id="map2"></div>
        计算两点路径，点击添加锚点：<input id="map3_text" type="text" value=""/>m
        <div id="map3"></div>
        多点路径，点击添加锚点
        <div id="map4"></div>
        读取KML
        <div id="map5"></div>
        Geolocation
        <div id="map6" style="width:700px; height:300px;"></div>
    </body>
</html>
